
<template>
        <el-form ref="ruleForm" :modle="ruleForm" class="login-box">
          <h3 class="login-title">健康管理系统欢迎您的使用</h3>
          账号
          <el-form-item lable="账号" prop="id">
            <el-input type="text" placeholder="请输入用户号码" v-model="ruleForm.id" prefix-icon="el-icon-user"></el-input>
          </el-form-item>
          密码
          <el-form-item lable="密码" prop="password">
            <el-input type ="password" placeholder="请输入密码" v-model="ruleForm.password" prefix-icon="el-icon-user"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit('ruleForm')">登录</el-button>
          </el-form-item>
    </el-form>
</template>

<script>
export default{
  name: 'login',
  data () {
    return {
      ruleForm: {
        id: 'admin',
        password: 'wbg.666'
      },
      rules:{
        //验证用户名是否合法
        id:[
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ]
      },
    }
  },
  methods: {
    onSubmit(formName) {
      this.$router.push('/Home')
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.get.post('http://localhost:8181/User/findById/', this.ruleForm.id);
          // console.log(this.ruleForm.id)
          // console.log(this.ruleForm.password)
          this.$router.push('/Home')
          if (res.code !== 200) {
            this.$message.error('登陆失败');
            return;
          } else {
            this.$message.success('登陆成功');
            this.$router.push('/home');
          }
        } else {
          return;
        }
      })
    }
  }
}
</script>

<style lang = "css" scoped>
.login-box{
  width: 350px;
  margin: 150px auto;
  border: 1px solid #DCDFE6;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 030px #DCDFE6;
}
.login-title{
  text-align: center;
}
</style>

